<template>
	<view class="tool-wrapper" >
		<!-- 回到顶部按钮 -->
		<view style="width: 40px;height: 40px;border-radius: 40px;margin-bottom: 5px;" v-show="scrollTop > 1000"
			:class="['tool btn-totop', {'onlyme': onlyGotopBtn}]" @mouseenter="activeIndex = 5;" @click="goTop">
			<img class="icon" :src="activeIndex == 3 ? tools[3].iconActiveUrl : tools[3].iconUrl" />
		</view>
		<!-- <view >
			<block v-for="(item, index) in tools" :key="index" v-if="!onlyGotopBtn && index < 3">
				<a class="tool" :href="item.linkUrl || 'javascript:void(0);'" :target="item.linkUrl ? '_blank' : '_self'" :style="{'cursor': item.linkUrl ? 'pointer' : 'default','border-top-right-radius':index==0||index==2?'50px;border-top-left-radius: 50px;':''}"
				 @mouseenter="activeIndex = index;">
					<img class="icon" :src="activeIndex == index ? item.iconActiveUrl : item.iconUrl" />
					<view class="name">{{item.name}}</view>
				</a>
			</block>
		</view> -->
		<a class="tool" style="border-top-right-radius:50px;border-top-left-radius: 50px;">
			<img class="icon" src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" />
			<view class="name">客服</view>
		</a>
		<a class="tool">
			<img class="icon" src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" />
			<view class="name">合作</view>
		</a>
		<a class="tool" style="border-bottom-right-radius:50px;border-bottom-left-radius: 50px;">
			<img class="icon" src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" />
			<view class="name">社群</view>
		</a>
		<!-- 二维码弹窗 -->
		<!-- <view class="qrcode-popup" v-if="activeIndex == 0">
			<img class="qrcode" src="https://i8.mifile.cn/b2c-mimall-media/93650133310ec1c385487417a472a26c.png" />
			<view class="desc">手机扫一扫一分赢好礼</view>
		</view> -->
	</view>
</template>

<script>
	import toolBarConfig from '@/common/config/home/tool-bar.config.js';

	export default {
		props: {
			scrollTop: {
				type: Number,
				default: 0
			},
			onlyGotopBtn: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				...toolBarConfig,
				activeIndex: -1
			}
		},
		methods: {
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				});
			}
		}
	}
</script>

<style lang="scss">
	.tool-wrapper {
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;

		@media screen and (min-width: 1406px) {
			display: block !important;
		}

		.tool {
			display: block;
			width: 40px;
			height: 50px;
			// margin-top: -1px;
			border: 0px solid #f5f5f5;
			text-align: center;
			background-color: #000000;

			&:hover {
				.name {
					color: #ff6700;
				}
			}

			&.btn-totop {
				cursor: pointer;
				margin-top: 14px;

				&.onlyme {
					margin-top: 500px;
				}
			}

			.icon {
				width: 15px;
				height: 15px;
				margin-top: 8px;
			}

			.name {
				color: #757575;
			}
		}

		%arrow {
			content: '';
			position: absolute;
			top: 20px;
			border: 8px solid transparent;
		}

		.qrcode-popup {
			position: absolute;
			right: 100%;
			top: 0;
			margin-right: 15px;
			padding: 14px;
			background-color: #FFFFFF;
			border: 1px solid #f5f5f5;

			.qrcode {
				width: 100px;
				height: 100px;
				margin: 6px auto 0;
			}

			.desc {
				margin: 12px auto 0;
				color: #757575;
				text-align: center;
				width: 82px;
			}

			&::before {
				@extend %arrow;
				right: -17px;
				border-left-color: #f5f5f5;
			}

			&::after {
				@extend %arrow;
				right: -16px;
				border-left-color: #FFFFFF;
			}
		}
	}
</style>